<script lang="ts" setup>
const Token = <string>localStorage.getItem('accessToken');
import AiservAPI from "@/api/aiserv";
const props = defineProps({
    isShowRateData: {
        type: String,
        default: true,
    },
});
const loading = ref(false);
const score = ref<number | string>();
const reason = ref('');
const NenVal =ref('')
watch(() => props.isShowRateData, (newValue: any, oldValue: any) => {
    // console.log('newValue',newValue);
    reason.value='';
    score.value='';
    NenVal.value = newValue;

}, { immediate: true, deep: true });
const intellectRate = () => {
    const obj = {
        session_code: NenVal.value,
        // max_score:100  可不传默认值为100
    };
    loading.value = true;
    AiservAPI.getSessionRate(Token, obj).then(res => {
        score.value = res.data.score;
        reason.value = res.data.reason;
        ElMessage.success('评分成功');
    }).finally(() => {
        loading.value = false; // 加载完成
    }).catch(error => {
          ElMessage.error('评分失败');
    });
}
</script>

<!-- 卡槽反问右边的信息 -->
<template>
    <section class="h-full w-110 from-list flex flex-col  rate-list" v-loading="loading">
        <div class="info-box">
            <el-scrollbar height="100%">
                <div class="rate-num-box flex items-center">
                    <div class="rate-left">分值：</div>
                    <div class="rate-right flex items-center">
                        <el-text class="mx-1 rate-num" type="success">{{ score }}</el-text>
                        分
                    </div>
                </div>
                <div class="reason-text-box flex">
                    <div class="reason-left">评分原因：</div>
                    <div class="reason-right">
                        {{ reason }}
                    </div>
                </div>
                <div class="flex justify-center"><el-button type="success" size="large"
                        @click="intellectRate">智能评分</el-button></div>
            </el-scrollbar>
        </div>
    </section>
</template>

<style scoped>
.info-box {
    padding: 0 15px;
    padding-bottom: 10px;
}

.rate-num-box {
    margin: 20px 0;

}

.rate-list{
    background-color: var(--el-bg-color-overlay);
    color: var(--v-talk-info-color);
    border-left: 1px solid var(--v-ai-rate-border-color);
}

.reason-text-box {
    margin-bottom: 20px;
}

.rate-left,
.reason-left {
    width: 20%;
    text-align: right;
}

.reason-right,
.rate-right {
    flex: 1;
    /* width: 80%; */
}

.rate-num {
    font-size: 30px;
    margin: 0 15px;
}
</style>